<template>
  <div class="Personal-wrap flex">
    <div class="personal-left">
      <el-card class="box-card">
        <div class="personal-head flex">
          <img :src="headImg" alt="" />
        </div>
        <div class="personal-other">
          <div class="personal-name por flex">
            <span class="personal-name-label poa">姓名：</span>
            <span class="personal-name-value">Fancy</span>
          </div>
          <div class="personal-position flex">管理员</div>
        </div>
      </el-card>
    </div>
    <div class="personal-right">
      <el-card class="box-card">
        <div class="personal-info-top">
          <div class="info-top">
            <el-descriptions border title="用户信息">
              <el-descriptions-item label="用户名">{{
                $store.state.userInfo.name
              }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{
                $store.state.userInfo.phone
              }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{
                $store.state.userInfo.sex
              }}</el-descriptions-item>
              <el-descriptions-item label="民族">{{
                $store.state.userInfo.nation
              }}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{$store.state.userInfo.age}}</el-descriptions-item>
              <el-descriptions-item label="职位">管理员</el-descriptions-item>
              <el-descriptions-item label="描述">{{$store.state.userInfo.remark}}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="personal-info-bot flex">
            尽情期待!!!
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import headImg from "../../assets/images/userinfo/头像男 拷贝 4.png";
export default {
  data() {
    return {
      headImg,
    };
  },
};
</script>
 
<style lang="less" scoped>
.Personal-wrap {
  height: 100%;
  justify-content: space-between;
  .el-card {
    height: 100%;
  }
  .personal-left {
    width: 30%;
    border: 10px solid #0c7d9d;
    /deep/ .el-card__body {
      height: 85%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .personal-head {
      justify-content: center;
      img {
        width: 50%;
      }
      padding-bottom: 40px;
    }
    .personal-other {
      .personal-name {
        font-size: 28px;
        line-height: 40px;
        border-bottom: 5px solid rgb(249, 253, 4);
        .personal-name-label {
        }
        .personal-name-value {
          width: 100%;
          text-align: center;
        }
      }
      .personal-position {
        padding-top: 40px;
        justify-content: center;
        font-size: 40px;
      }
    }
  }
  .personal-right {
    width: 67%;
    .personal-info-bot{
        justify-content: center;
        align-items: center;

    }
  }
}
</style>